<template>
<li>
  <a>
    <et-icon :name="icon" />
    <span v-if="items.length > 0" class="badge">{{items.length}}</span>
  </a>
  <ul class="menu vertical et-top-right-menu-item">
    <li v-if="items.length > 0" v-for="item in msgs.items">
      <a @click="msgHandler">{{item.label}}</a>
    </li>
    <li v-if="msgs.hasMore" class="more-msg">
      <a @click="moreMsgHandler">{{ $t('cmpt.label.moreMsg') }}</a>
    </li>
    <li v-if="items.length === 0" class="text-center">
      <a>{{ $t('cmpt.label.noMsg') }}</a>
    </li>
  </ul>
</li>
</template>

<script>
import { EtIcon } from '../../../widgets';

export default {

  components: {
    EtIcon
  },

  props: {
    icon: {
      type: String,
      default: 'notice'
    },
    items: {
      type: Array,
      default: () => []
    },
    msgHandler: {
      type: Function,
      default: () => {}
    },
    moreMsgHandler: {
      type: Function,
      default: () => {}
    }
  },

  computed: {
    msgs() {
      if (this.items.length > 5) {
        return {
          items: this.items.slice(0, 5),
          hasMore: true
        };
      } else {
        return {
          items: this.items,
          hasMore: false
        };
      }
    }
  },

  i18n: {
    messages: {
      en: {
        cmpt: {
          label: {
            moreMsg: "More Messages",
            noMsg: "No Message"
          }
        }
      },
      cn: {
        cmpt: {
          label: {
            moreMsg: "更多消息",
            noMsg: "没有消息"
          }
        }
      }
    }
  }

};
</script>
